<template>
  <CommonQueryLayout class="tag-control">
    <CommonTopControl title-text="标签管理">
      <a-button type="primary" @click="openAddTagDia">添加标签</a-button>
    </CommonTopControl>
    <a-row class="tag-control__content">
      <a-col :span="7">
        <div class="tag-control__tree-top">
          <span class="tag-control__top-title"> 分类选择 </span>
          <div style="width: 270px">
            <a-input-search
              v-model:value="treeSearchValue"
              placeholder="输入分类名搜索分类"
              :loading="fetchClassifyLoading"
              @search="searchClassify"
            />
          </div>
        </div>

        <a-tree
          show-line
          class="tag-control__tree"
          v-model:expanded-keys="expandedKeys"
          v-model:selected-keys="currentCategory"
          :tree-data="classifyTree"
          :auto-expand-parent="autoExpandParent"
          :replaceFields="{
            children: 'childCateGoryList',
            title: 'name',
            key: 'id',
          }"
          @select="selectTreeNode"
        >
          <template #title="{ name }">
            <span v-if="name.indexOf(treeSearchValue) > -1">
              {{ name.substr(0, name.indexOf(treeSearchValue)) }}
              <span style="color: #f50">{{ treeSearchValue }}</span>
              {{
                name.substr(
                  name.indexOf(treeSearchValue) + treeSearchValue.length
                )
              }}
            </span>
            <span v-else>{{ name }}</span>
          </template>
        </a-tree>
      </a-col>
      <a-col :span="1" class="tag-control__divier-wrapper">
        <a-divider
          type="vertical"
          style="height: 100%; background-color: rgba(0, 0, 0, 0.06)"
        />
      </a-col>
      <a-col :span="16">
        <div class="tag-control__tag-table-top">
          <span class="tag-control__top-title">
            {{ currentClassify.name }}标签列表
          </span>
          <div style="width: 270px">
            <a-input-search
              v-model:value="tagSearchValue"
              placeholder="输入标签名搜索"
              :loading="fetchTagListLoading"
              @search="queryTagList"
            ></a-input-search>
          </div>
        </div>
        <a-table
          bordered
          rowKey="id"
          :size="tagListTableState.tableSize"
          :columns="tagListTableState.tableColumns"
          :dataSource="tagListTableState.tableData"
          :loading="fetchTagListLoading"
          :pagination="false"
        >
          <template #options="{ record }">
            <a-space>
              <a-button
                size="small"
                type="primary"
                @click="openEditTagDia(record)"
                >编辑</a-button
              >
              <a-popconfirm
                title="确定删除此标签吗？"
                @confirm="delTags([record.id])"
              >
                <a-button
                  size="small"
                  type="primary"
                  danger
                  :loading="batchDeleteTagLoading"
                >
                  删除
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table>
        <a-pagination
          class="tag-control__page-wrapper"
          show-size-changer
          show-quick-jumper
          :show-total="formatTotalPageText"
          v-model:current="pageInfo.current"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @change="queryTagList"
          @showSizeChange="queryTagList"
          size="small"
        />
      </a-col>
    </a-row>
  </CommonQueryLayout>
  <AddTagDialog
    :data-wrapper="addTagDiaState"
    :classify-tree-data="classifyTree"
    :confirm-loading="batchBindCategoryLoading || optionTagLoading"
    @enter="confirmAddTagDia"
  />
  <EditTagDialog
    :data-wrapper="editTagDiaState"
    :classify-tree-data="classifyTree"
    @enter="confirmEditTagDia"
    :confirm-loading="confirmEditTagDiaLoading"
  />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import useSearchClassifyTree from './hooks/useSearchClassifyTree'
import useSearchTagList from './hooks/useSearchTagList'
import useAddTagDialog from './hooks/useAddTagDialog'
import useEditTagDialog from './hooks/useEditTagDialog'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { CommonTopControl } from '@/components/TopControl'
import AddTagDialog from './components/AddTagDialog.vue'
import EditTagDialog from './components/EditTagDialog.vue'

const {
  getClassifyList,
  fetchClassifyLoading,
  classifyTree,
  treeSearchValue,
  currentClassify,
  searchClassify,
  expandedKeys,
  autoExpandParent,
} = useSearchClassifyTree()

const {
  tagListTableState,
  queryTagList,
  currentCategory,
  fetchTagListLoading,
  tagSearchValue,
  pageInfo,
  formatTotalPageText,
  selectTreeNode,
  batchDeleteTagLoading,
  delTags,
} = useSearchTagList(currentClassify)

const {
  addTagDiaState,
  openAddTagDia,
  confirmAddTagDia,
  batchBindCategoryLoading,
  optionTagLoading,
} = useAddTagDialog(queryTagList)

const {
  editTagDiaState,
  openEditTagDia,
  confirmEditTagDia,
  confirmEditTagDiaLoading,
} = useEditTagDialog(queryTagList)

onMounted(async () => {
  await getClassifyList()
  await queryTagList()
})
</script>

<style lang="scss" scoped>
@include b(tag-control) {
  @include e(content) {
    margin-top: 16px;
  }
  @include e(tag-table-top) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  @include e(top-title) {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    font-size: 16px;
  }
  @include e(tree-top) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  @include e(divier-wrapper) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @include e(tree) {
    border: 1px #eee solid;
  }
  @include e(page-wrapper) {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }
}
</style>
